<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Markdown Renderer</title>
    <!-- 引入 highlight.js 样式（任选一个主题） -->
    <!-- <link rel="stylesheet" href="https://mirror.fe80.cn/highlight.js/11.7.0/styles/default.min.css"> -->
    <link rel="stylesheet" href="https://mirror.fe80.cn/highlight.js/11.9.0/styles/vs2015.min.css">
    <link rel="stylesheet" href="style.css">
    <!-- 图片浏览器 -->
    <script src="https://mirror.fe80.cn/jquery/3.6.0/jquery.min.js"></script>
    <script src="//mirror.fe80.cn/others/viewer/viewer.min.js"></script>
    <link rel="stylesheet" href="//mirror.fe80.cn/others/viewer/viewer.min.css">
</head>

<body>
    <!-- <div id="content"></div> -->
    <div id="preview" class="markdown-body"></div>

    <!-- 引入 marked 和 highlight.js -->
    <script src="https://mirror.fe80.cn/marked/15.0.7/marked.min.js"></script>
    <script src="https://mirror.fe80.cn/highlight.js/11.7.0/highlight.min.js"></script>

    <script>
        // 自定义渲染器
        const renderer = new marked.Renderer();

        // 重写 blockquote 渲染逻辑
        renderer.blockquote = function(quote) {
            // console.log(quote);
            // 匹配 [default] 或 [info] 等自定义标识
            // const match = quote.text.match(/^$$(\w+)$$\s*(.*)/);
            const match = quote.text.match(/^\[(\w+)\](\n?\s*)(.*)/s);
            // console.log("匹配：",match);
            if (match) {
                const type = match[1]; // 提取标识符（如 default/info）
                const content = match[3]; // 提取内容
                return `<blockquote class="${type}"><p>${content}</p></blockquote>`;
            }
            // 默认情况（无标识符）
            return `<blockquote class="default"><p>${quote.text}</p></blockquote>`;
        };

        // 配置 marked
        marked.setOptions({
            renderer,
            gfm: true,
            breaks: true,
            highlight: function (code, lang) {
                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                return hljs.highlight(code, { language }).value;
            }
        });

        // 页面加载完成后执行
        window.addEventListener('DOMContentLoaded', async () => {
            try {
                // 获取 content.md 文件
                const response = await fetch('content.md');
                const markdown = await response.text();

                // 转换为 HTML
                const html = marked.parse(markdown);

                // 插入页面
                document.getElementById('preview').innerHTML = html;

                // 执行代码高亮
                hljs.highlightAll();

                
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('preview').innerHTML = '<p>⚠️ Failed to load content</p>';
            } finally  {
                console.log('Finally');
                $(function(){
                    $('.markdown-body').viewer({title:0});
                });
            }
        });
    </script>
</body>

</html>